<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
</head>
<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>
    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.后代选择器 $("A B") A下的所有B(包括B的子级)
    let spans1 = $("div span");
    alert(spans1.length)
    //2.子选择器 $("A>B") A下的所有B(不包括B的子级)
    let spans2 = $("div>span");
    alert(spans2.length)
    //3.兄弟选择器 $("A+B") A相邻的下一个B
    let ps1 = $("div+p")
    alert(ps1.length)
    //3.兄弟选择器 $("A~B") A相邻的所有B
    let ps2 = $("div~p")
    alert(ps2.length)
</script>
</html>